<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
  </el-breadcrumb>
  <div>
    <p v-for="p in content.paragraphs">{{ p }}</p>
  </div>
  <div>
  <el-backtop
    :visibility-height="0"
  >
    <router-link :to="'/book/' + $route.params.bookId + '/' + (parseInt($route.params.chapterNum)+1)">下一章</router-link>
  </el-backtop>
  </div>
</template>

<script>
import { ref, reactive, defineComponent, onMounted, onUpdated, watch } from "vue";
import { useRouter, useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
import service from "@/utils/request";
import { useStore } from "vuex";

export default defineComponent({
  name: "BookMain",
  props: {
    bookInfo: {
      id: String,
      name: String,
      tags: Array,
      // [
      //   name: String
      // ]
      imgUrl: String,
      author: String,
      minor: String,
      totalWords: String,
      finalDate: String,
      data: Array,
      // [
      //   {
      //     key: String,
      //     value: String
      //   }
      // ]
      desc: String
    }
  },
  components: {
    
  },
  setup () {
    
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    
    const content = reactive({
      paragraphs: '',
    })
    
    // onBeforeRouteLeave ((to, from) => {
    //   service.get(route.path).then(res => {
    //     content.paragraphs = res.data.paragraphs
    //   })
    // })
    
    // onBeforeRouteUpdate ((to, from) => {
    //   if(to.params.chapterNum !== from.params.chapterNum) {
    //     service.get(route.path).then(res => {
    //       content.paragraphs = res.data.paragraphs
    //     })
    //   }
    // })
    // watch(
    //   () => route.params,
    //   (newNum, oldNum) => {
    //     console.log("old==>", route.params)
    //     console.log("new==>", route.params)
    //     console.log("newUrl==>", "/book/" + route.params.bookId + "/" + route.params.chapterNum)
    //     if( route.params.bookId !== undefined && route.params.chapterNum !== undefined) {
    //       service.get("/book/" + route.params.bookId + "/" + route.params.chapterNum).then(res => {
    //         content.paragraphs = res.data.paragraphs
    //       })
    //     }
    //   }
    // )
    
    onMounted(() => {
      service.get("/book/" + route.params.bookId + "/" + route.params.chapterNum).then(res => {
        content.paragraphs = res.data.paragraphs
      })
      // 添加阅读记录
      store.commit("addReadRecord", { book: { id: route.params.bookId }, chapterNum: route.params.chapterNum});
    })
    
    onBeforeRouteUpdate((to, from, next) => {
      console.log("routeChange")
      console.log(to)
      if ( to !== from) {
        service.get(to.fullPath).then(res => {
          content.paragraphs = res.data.paragraphs
        })
        next()
      }
      // 添加阅读记录
      store.commit("addReadRecord", { book: { id: to.params.bookId }, chapterNum: to.params.chapterNum});
    })
    
    return {
      content
    }
  }
})
</script>

<style>
</style>
<!-- 
 const book = reactive ({
   // 书的id
   id: '',
   // 书名
   name: '',
   // 标签
   tags: [
     {
       // 标签名
       name: '',
       // 官网样式
       style: ''
     }
   ],
   // 封面图片链接
   imgUrl: '',
   // 作者名
   author: '',
   // 小类别
   minor: '',
   // 总字数
   totalWords: '',
   // 最后更新日期
   finalDate: '',
   // 数据 包含: 追书人数，读者留存率，日更新字数
   data: [
     {
       key: '',
       value: ''
     }
   ],
   // 简介
   desc: ''
 })
 -->